<template>
  <div>
    <el-form ref="myform" :model="formItem" label-width="120px" size="mini" class="form-view">
      <el-row :gutter="40">
        <el-col :span="24">
          <el-form-item label="合同名称" require prop="name">
            {{ formItem.name }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合同号" require prop="code">
            {{ formItem.code }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="签订时间" require prop="signingDate">
            {{ formItem.signingDate }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="供应商" require prop="manufacturerName">
            {{ formItem.manufacturerName }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="联系人" require prop="manufacturerContact">
            {{ formItem.manufacturerContact }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="联系人电话" require prop="manufacturerTelephone">
            {{ formItem.manufacturerTelephone }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合同描述" require prop="description">
            {{ formItem.description }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="附件">
            <div v-for="fileObj in formItem.attachment" :key="fileObj.fsId">
              <el-link type="primary" :href="downloadFileUrl(fileObj.fsId)" :download="downloadFileUrl(fileObj.fsId)" target="_blank">{{ fileObj.name }}</el-link>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { formatDate } from '@neu/biz-core/utils/utils'
import { detail, downloadFileUrl } from '@neu/dcam-ui/api/contract'

// 定义一个表单原始项
const formItem = {
  name: '',
  code: '',
  manufacturerName: '',
  manufacturerContact: '',
  manufacturerTelephone: '',
  signingDate: null,
  description: '',
  /** 附件 */
  attachment: []
}
export default {
  name: 'ContractEditForm',
  components: {
  },
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      anchorList: [ // 锚点列表
        { id: 'module1', label: '基本信息' },
        { id: 'module2', label: '其他信息' },
        { id: 'module3', label: '合同详细' }
      ],
      // 编辑的表单内容
      formItem: {
        ...formItem
      },
      insideColumns: [
        { title: '分类名称', key: 'assetTypeName' },
        { title: '产品名称', key: 'productName' },
        { title: '规格型号', key: 'standard' },
        { title: '数量', key: 'count' },
        { title: '金额', key: 'amount' },
        { title: '描述', key: 'description' }
      ],
      downloadFileUrl: downloadFileUrl
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: function() {
      this.fetch()
    }
  },
  created() {
    this.fetch()
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          const data = response.data
          if (data.attachment) {
            const fileJoins = data.attachment.split('||')
            data.attachment = fileJoins.map(it => {
              const fsInfo = it.split('@@')
              return {
                fsId: fsInfo[0],
                name: fsInfo[1]
              }
            })
          } else {
            data.attachment = []
          }

          this.formItem = {
            ...data
          }
          if (this.formItem.signingDate) {
            this.formItem.signingDate = formatDate(this.formItem.signingDate)
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    }
  }
}
</script>
